<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8"/>
  <title>jQuery - Start Animation</title>
  <script src="jquery-1.11.2.min.js"></script>
  <script>
    $(document).ready(function() {
      //动画速度
      var speed = 500;
      //绑定事件处理
      $("#btnShow").click(function(event) {
        //取消事件冒泡
        event.stopPropagation();
        //设置弹出层位置
        var offset = $(event.target).offset();
        $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
        //切换弹出层的显示状态
        $("#divPop").toggle(speed);
      });
      //单击空白区域隐藏弹出层
      $(document).click(function(event) {
        $("#divPop").hide(speed)
      });
      //单击弹出层则自身隐藏
      $("#divPop").click(function(event) {
        $("#divPop").hide(speed)
      });
    });
  </script>
</head>
<body>
  <div>
    <button id="btnShow">Display the text prompt</button>
  </div>
  <!-- 弹出层 -->
  <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;">
    <div style="text-align: center;">pop div</div>
  </div>
</body>
</html>